<div class="challenge-card">
  <div class="row">
    <div class="ev-pad">
      <div class="ev-md-container ev-card-panel">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 content">
          <div class="fs-16 fw-light"><strong>Note:</strong> By default, we allocate 0.25 vCPU and 0.5 GB memory
          to each challenge evaluation worker. In case your evaluation requires additional resources,
          please email us at <a href="mailto:admin@cloudcv.org" class="blue-text">admin@cloudcv.org</a>.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-card-container ev-card-panel">
    <div class="row">
      <div class="col-md-8 col-sm-8">
        <h5 class="fw-light">Challenge Settings</h5>
      </div>
    </div>
    <mat-tab-group animationDuration="0ms">
      <mat-tab label="Challenge Details">
        <ng-template matTabContent>
          <!-- Edit Challenge details -->
          <div class="row settings-section">
            <div class="col-s12 challenge-detail">
              <div class="col-lg-4 col-sm-4 upload-container">
                <div class="image-container">
                  <img *ngIf="challenge['image'] != null" [src]="challenge['image']" width="100%" />
                  <img *ngIf="challenge['image'] == null" src="assets/images/404.png" width="80%" />
                </div>
                <div
                  class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-16 upload-button"
                  (click)="editChallengeImage()"
                >
                  <i class="fa fa-file" aria-hidden="true"> </i>
                  <span> Upload New Image</span>
                </div>
              </div>
              <div class="col-lg-6 col-md-12 col-sm-7 col-xs-12">
                <span class="fs-20 fw-semibold challenge-title">
                  {{ challenge['title'] }}
                </span>
                <a
                  style="padding-right: 4px;"
                  class="pointer fs-16"
                  *ngIf="isChallengeHost"
                  (click)="editChallengeTitle()"
                >
                  <i class="fa fa-pencil" aria-hidden="true"></i>
                </a>
                <a class="pointer fs-16" *ngIf="isChallengeHost" (click)="deleteChallenge()">
                  <i class="fa fa-trash red-text" aria-hidden="true"></i>
                </a>
                <br />
                <div class="ev-action">
                  <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
                    <span class="fs-16 fw-light">
                      <strong class="text-light-black">Challenge Overview </strong>
                    </span>
                    <a class="pointer fs-16" (click)="editChallengeOverview()">
                      <i class="fa fa-pencil" aria-hidden="true"> </i>
                    </a>&nbsp;&nbsp;&nbsp;
                    <a class="pointer fs-16" (click) = "editChallengeOverviewUpload()">
                      <i class="fa fa-upload" aria-hidden="true"> </i>
                    </a>
                  </div>
                </div>
                <div class="ev-action">
                  <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5">
                    <span class="fs-16 fw-light">
                      <strong class="text-light-black">Terms and Conditions </strong>
                    </span>
                    <a class="pointer fs-16" (click)="editTermsAndConditions()">
                      <i class="fa fa-pencil" aria-hidden="true"> </i>
                    </a>&nbsp;&nbsp;&nbsp;
                    <a class="pointer fs-16" (click) = "editChallengeTermsAndConditionsUpload()">
                      <i class="fa fa-upload" aria-hidden="true"> </i>
                    </a>
                  </div>
                </div>
                <!-- Start date -->
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Starts on:</strong>
                  {{ challenge['start_date'] | date: 'medium' }} {{ challenge['start_zone'] }}
                </span>
                <span *ngIf="isChallengeHost" class="fs-16 fw-light">
                  <a class="pointer fs-16" (click)="challengeDateDialog()">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                  </a>
                </span>
                <br />
                <!-- End date -->
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Ends on:</strong>
                  {{ challenge['end_date'] | date: 'medium' }} {{ challenge['end_zone'] }}
                </span>
                <span *ngIf="isChallengeHost" class="fs-16 fw-light">
                  <a class="pointer fs-16" (click)="challengeDateDialog()">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                  </a>
                </span>
                <br />
                <span class="fs-16 fw-light" *ngIf="isChallengeHost">
                  <a class="pointer" (click)="togglePublishChallengeState()">
                    <strong class="text-light-black">{{ publishChallenge.state }} </strong>
                    <i class="{{ publishChallenge.icon }}" aria-hidden="true"></i>
                  </a>
                </span>
                <br />
                <mat-checkbox
                  color="primary"
                  class="fw-semibold"
                  *ngIf="isChallengeHost"
                  [checked]="!challenge['is_registration_open']"
                  (click)="stopParticipation($event)"
                  ><strong class="text-light-black fs-15">Close Participation</strong>
                </mat-checkbox>
              </div>
            </div>
          </div>

          <!-- Banned Email Ids -->
          <div class="row settings-section">
            <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
              <span class="fw-light fs-18">Banned emails Ids:</span>
            </div>
            <div class="col-lg-7 col-md-7 col-sm-9 col-xs-9">
              <mat-form-field class="example-chip-list">
                <mat-chip-list #chipList>
                  <mat-chip
                    *ngFor="let email of bannedEmailIds"
                    [selectable]="selectable"
                    [removable]="removable"
                    (removed)="remove(email)"
                  >
                    {{ email }}
                    <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                  </mat-chip>
                  <input
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    [matChipInputAddOnBlur]="addOnBlur"
                    (matChipInputTokenEnd)="add($event)"
                  />
                </mat-chip-list>
              </mat-form-field>
              <div class="error-message" *ngIf="isValidationError">{{ message }}</div>
              <div
                class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-16"
                [class.disabled]="isValidationError"
                (click)="reflectChange()"
              >
                <span>Update</span>
              </div>
            </div>
          </div>
        </ng-template>
      </mat-tab>

      <!-- Edit Phase Details -->
      <mat-tab label="Phase and Leaderboard Details">
        <div class="row settings-section">
          <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
            <span class="fw-light fs-18">Edit Phase</span>
          </div>
          <div class="ev-action">
            <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box" *ngIf="isChallengeHost">
              <div class="row margin-bottom-cancel phase-card">
                <app-selectphase
                  [phases]="filteredPhases"
                  [phaseSelectionListType]="phaseSelectionListType"
                  [phaseSelectionType]="phaseSelectionType"
                  [phaseSelected]="phaseSelected()"
                  #phaseselect
                ></app-selectphase>
              </div>

              <div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhase">
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Phase Details </strong>
                </span>
                <a class="pointer fs-16" (click)="editPhaseDetails()">
                  <i class="fa fa-pencil" aria-hidden="true"> </i> 
                </a>&nbsp;&nbsp;&nbsp;
                <a class="pointer fs-16" (click) = "editPhaseDetailsUpload()">
                  <i class="fa fa-upload" aria-hidden="true"> </i></a
                >&nbsp;&nbsp;&nbsp;
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Is Public </strong>
                </span>
                <a class="pointer fs-20" (click)="togglePhaseVisibility()">
                  <i class="{{ phaseVisibility.icon }}" aria-hidden="true"> </i> </a
                >&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Submission Visibility </strong>
                </span>
                <a class="pointer fs-20" (click)="toggleSubmissionVisibility()">
                  <i class="{{ submissionVisibility.icon }}" aria-hidden="true"> </i>
                </a>
                <br /><br />
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Test Annotations </strong>
                </span>
                <a class="pointer fs-15" (click)="editTestAnnotations()">
                  <i class="fa fa-upload" aria-hidden="true"> </i>
                </a>
              </div>
              <div class="col-s12" *ngIf="selectedPhase">
                <p class="fw-light">
                  <strong> Note: </strong> For test annotations > 100MB, please use
                  <a href=" https://cli.eval.ai/#challenge-annotations" target="_blank"
                    ><strong class="blue-text"> evalai-cli </strong></a
                  >
                  to update the test annotations.
                  <a (click)="showCliInstructions()"><strong class="blue-text">View Instructions</strong></a>
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="row settings-section">
          <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
            <span class="fw-light fs-18">Edit Leaderboard</span>
          </div>
          <div class="ev-action">
            <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box" *ngIf="isChallengeHost">
              <div class="row margin-bottom-cancel phase-card">
                <app-selectphase
                  [settingsPhaseSplits]="filteredPhaseSplits"
                  [phaseSelectionType]="phaseLeaderboardSelectionType"
                  [phaseSelectionListType]="phaseLeaderboardSelectionListType"
                  [phaseSplitSelected]="phaseSplitSelected()"
                  #phasesplitselect
                >
                </app-selectphase>
              </div>
              <div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhaseSplit">
                <div class="col s12">
                  <span class="fs-16 fw-light">
                    <strong class="text-light-black">Leaderboard Visibility </strong>
                  </span>
                  <a class="pointer fs-20" (click)="toggleLeaderboardVisibility()">
                    <i class="{{ leaderboardVisibility.icon }}" aria-hidden="true"> </i>
                  </a>&nbsp;&nbsp;&nbsp;&nbsp;
                  <span class="fs-16 fw-light">
                    <strong class="text-light-black">Leaderboard Schema </strong>
                  </span>
                  <a class="pointer fs-16" (click)="editLeaderboardSchema()">
                    <i class="fa fa-pencil" aria-hidden="true"></i>
                  </a>&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
              </div>
              <div class="row margin-bottom-cancel phase-card" *ngIf="selectedPhaseSplit">
                <div class="col s12">
                  <span class="fs-16 fw-light">
                    <strong class="text-light-black">Leaderboard Precision Value </strong>
                  </span>
                  <br />
                  <span class="fw-light">
                    Changing the precision value will show the results with that precision value to the participants.
                  </span>
                  <div class="rangeslider fa-stack fa-2x">
                    <button
                      [disabled]="minusDisabled"
                      class="btn-floating btn-pagination waves-effect waves-light"
                      (click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue - 1)"
                    >
                      <i class="fa fa-minus"></i>
                    </button>
                    <mat-chip class="btn">{{ leaderboardPrecisionValue }}</mat-chip>
                    <button
                      [disabled]="plusDisabled"
                      class="btn-floating plus-btn btn-pagination waves-effect waves-light"
                      (click)="updateLeaderboardDecimalPrecision(leaderboardPrecisionValue + 1)"
                    >
                      <i class="fa fa-plus"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </mat-tab>

      <!-- Edit Evaluation Script and Criteria & Worker logs -->
      <mat-tab label="Evaluation">
        <ng-template matTabContent>
          <div class="row settings-section">
            <div class="margin-bottom-cancel">
              <div class="col s12 worker-title">
                <h5 class="w-300">Evaluation script</h5>
              </div>
            </div>
            <div class="ev-action">
              <div *ngIf="isChallengeHost" class="col-sm-1.5 col-xs-1.5 ev-upload-action">
                <!-- Evaluations Criteria Description -->
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Evaluation Criteria </strong>
                </span>
                <a class="pointer fs-16" (click)="editEvaluationCriteria()">
                  <i class="fa fa-pencil" aria-hidden="true"> </i> 
                </a>&nbsp;&nbsp;&nbsp;
                <a class="pointer fs-16" (click) = "editEvaluationCriteriaUpload()">
                  <i class="fa fa-upload" aria-hidden="true"> </i>
                </a>&nbsp;&nbsp;
                <!-- Evaluation Script -->
                <span class="fs-16 fw-light">
                  <strong class="text-light-black">Evaluation Script </strong>
                </span>
                <a class="pointer fs-15" (click)="editEvaluationScript()">
                  <i class="fa fa-file" aria-hidden="true"> </i>
                </a>
              </div>
            </div>
          </div>

          <div class="row settings-section" *ngIf="!challenge['remote_evaluation']">
            <div class="margin-bottom-cancel">
              <div class="col s12 worker-title">
                <h5 class="w-300">Submission worker actions</h5>
              </div>
            </div>
            <div class="row margin-bottom-cancel">
              <div class="col s12">
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
                  (click)="manageWorker('start')"
                >
                  <i class="fa fa-play"></i> Start worker
                </button>
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
                  (click)="manageWorker('stop')"
                >
                  <i class="fa fa-stop"></i> Stop worker
                </button>
                <button
                  class="btn ev-btn-dark waves-effect waves-dark grad-btn grad-btn-dark fs-12"
                  (click)="manageWorker('restart')"
                >
                  <i class="fa fa-refresh"></i> Restart worker
                </button>
              </div>
            </div>
            <div class="row margin-bottom-cancel">
              <div class="col s12">
                <h5 class="w-300">Submission worker logs</h5>
              </div>
            </div>
            <div class="ev-logs-card">
              <div *ngFor="let log of workerLogs; index as i" class="ev-logs">{{ log }}</div>
            </div>
          </div>
        </ng-template>
      </mat-tab>
    </mat-tab-group>
  </div>
</div>
